<template>
  <div>
    <el-upload :action="uploadPath" :data="dataObj" list-type="picture-card" :file-list="fileList"
               :on-remove="handleRemove" :on-success="handleUploadSuccess" :on-preview="handlePreview" :limit="maxCount"
               :on-exceed="handleExceed">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import {
    uploadPath
  } from "@/api/storage";

  export default {
    name: "multiUpload",
    props: {
      //图片属性数组
      value: Array,
      //最大上传图片数量
      maxCount: {
        type: Number,
        default: 5
      }
    },
    data() {
      return {
        uploadPath,
        dataObj: {
          policy: "",
          signature: "",
          key: "",
          ossaccessKeyId: "",
          dir: "",
          host: ""
        },
        dialogVisible: false,
        dialogImageUrl: null,
        imgList: [],
      };
    },
    computed: {
      fileList() {
        let fileList = [];
        this.imgList = []
        if (!this.value) {
          return;
        }
        for (let i = 0; i < this.value.length; i++) {
          this.imgList.push({
            url: this.value[i]
          })
          fileList.push({
            url: this.value[i]
          });
        }
        return fileList;
      },
    },
    methods: {
      emitInput(fileList) {
        let value = [];
        for (let i = 0; i < fileList.length; i++) {
          value.push(fileList[i].url);
        }
        this.$emit("input", value);
      },
      handleRemove(file, fileList) {
        this.emitInput(fileList);
      },
      handlePreview(file) {
        this.dialogVisible = true;
        this.dialogImageUrl = file.url;
      },

      handleUploadSuccess(res, file) {
        this.imgList.push({
          url: res.data.url
        });
        this.emitInput(this.imgList);
      },
      handleExceed(files, fileList) {
        this.$message({
          message: "最多只能上传" + this.maxCount + "张图片",
          type: "warning",
          duration: 1000
        });
      }
    }
  };
</script>

<style>

</style>


